

<!-- 新增&编辑 -->
<template>
	<view class="container">
		
		<!-- header部分 -->
		<view class='header-Container header-height'>
			<view class="header-bg"></view>
			<navHeader pageTitle="新增发票" colorTheme="black">
			</navHeader>
		</view>
		
		<!-- 申请信息 -->
		<view class="applyInfo-Container">
			<view class="oneRow">
				<view class="columnLabel">
					发票类型
				</view>
				<view class="columnValue">
					<!-- 申请类型 -->
					<view class="applyType-Container">
						<view @click="changeApplyType(1)" class="applyType" :class="{currentType1: applyType == 1}">
							<image class="checkbox" :src="icon.sel" v-if="applyType == 1"></image>
							<image class="checkbox" :src="icon.empty" v-else></image>
							<view class="typeName">
								公司
							</view>
						</view>
						<view @click="changeApplyType(2)" class="applyType" :class="{currentType2: applyType == 2}">
							<image class="checkbox" :src="icon.sel" v-if="applyType == 2"></image>
							<image class="checkbox" :src="icon.empty" v-else></image>
							<view class="typeName">
								个人或其他
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="splitLine borderOneRpx">
			</view>
			<view class="oneRow">
				<view class="columnLabel">
					发票抬头
				</view>
				<view class="columnValue">
					<input type="text" v-model="ciTitle" placeholder-class="inputHolder" placeholder="请输入发票抬头"/>
				</view>
			</view>
			<view v-if="applyType == 1" class="splitLine borderOneRpx">
			</view>
			<view v-if="applyType == 1" class="oneRow">
				<view class="columnLabel">
					税号
				</view>
				<view class="columnValue">
					<input type="text" v-model="ciNumber" placeholder-class="inputHolder" placeholder="请输入税号"/>
				</view>
			</view>
		</view>	
		
		<view v-if="applyType == 1" class="applyInfo-Container">
			<view class="oneRow">
				<view class="columnLabel">
					企业电话
				</view>
				<view class="columnValue">
					<input type="text" v-model="ciPhoneNumber" placeholder-class="inputHolder" placeholder="请输入企业电话（选填）"/>
				</view>
			</view>
			<view class="splitLine borderOneRpx">
			</view>
			
			<view class="oneRow">
				<view class="columnLabel">
					注册地址
				</view>
				<view class="columnValue">
					<input type="text" v-model="ciRegisteredAddress" placeholder-class="inputHolder" placeholder="请填写注册地址（选填）"/>
				</view>
			</view>
			<view class="splitLine borderOneRpx">
			</view>
			
			<view class="oneRow">
				<view class="columnLabel">
					开户银行
				</view>
				<view class="columnValue">
					<input type="text" v-model="ciBank" placeholder-class="inputHolder" placeholder="请填写开户银行（选填）"/>
				</view>
			</view>
			<view class="splitLine borderOneRpx">
			</view>
			
			<view class="oneRow">
				<view class="columnLabel">
					银行账号
				</view>
				<view class="columnValue">
					<input type="text" v-model="ciBankAccount" placeholder-class="inputHolder" placeholder="请输入银行账号（选填）"/>
				</view>
			</view>
		</view>
		
		
		<view class="applyInfo-Container">
			<view class="oneRow">
				<view class="columnLabel">
					电子收票邮箱
				</view>
				<view class="columnValue">
					<input type="text" v-model="ciEmail" placeholder-class="inputHolder" placeholder="请输入您的电子邮箱"/>
				</view>
			</view>
			<view class="splitLine borderOneRpx">
			</view>
		</view>
		
		
		<!-- 保存 -->
		<view @click="submitApplyHandler()" class="submit-btn">
			保存
		</view>
		
		<!-- 删除 -->
		<view v-if="editFlag != 0" @click="deleteInvoiceHandler()" class="delete-btn">
			删除
		</view>
	</view>
</template>

<script>
	import {
	    mapState,  
	    mapMutations  
	} from 'vuex';  
	
	import navHeader from '@/components/nav-header/nav-header';
	
	export default {
		components: {
			navHeader
		},
		data() {
			return {
				icon: {
					sel: '/static/images/cart/sel.png',
					empty: '/static/images/cart/empty.png'
				},
				
				editFlag: 0,
				
				//发票类型：1-公司; 2-个人或其他
				applyType: 1,
				cfId: "",
				ciTitle: "",
				ciNumber: "",
				ciPhoneNumber: "",
				ciRegisteredAddress: "",
				ciBank: "",
				ciBankAccount: "",
				ciEmail: ""
			}
		},
		computed:{
			...mapState(['hasLogin', 'imgSite']),
		},
		onLoad(options) {
			this.editFlag = options.editFlag || 0;
			if(options.invoice) {

				var invoice = JSON.parse(options.invoice);
				this.applyType = invoice.ciType;
				this.cfId = invoice.cfId;
				this.ciTitle = invoice.ciTitle;
				this.ciNumber = invoice.ciTaxpayerIdentificationNumber;
				this.ciPhoneNumber = invoice.ciPhoneNumber;
				this.ciRegisteredAddress = invoice.ciRegisteredAddress;
				this.ciBank = invoice.ciBank;
				this.ciBankAccount = invoice.ciBankAccount;
				
				//TODO邮箱字段
				this.ciEmail = invoice.ciEmail;
			}
		},
		methods: {
			
			//申请类型
			changeApplyType(type) {
				this.applyType = type;
			},
			
			//保存发票
			submitApplyHandler() {
				
				//必填校验
				if(!this.ciTitle) {
					this.$api.msg("请填写发票抬头");
					return ;
				}
				
				//公司-必填
				if(this.applyType == 1) {
					if(!this.ciNumber) {
						this.$api.msg("请填写税号");
						return ;
					}
				}
				
				if(!this.ciEmail) {
					this.$api.msg("请输入您的电子邮箱");
					return ;
				}
				 var strRegex = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
				 if (!strRegex.test(this.ciEmail)) return this.$api.msg("请输入正确的电子邮箱");
				
				var that = this;
				var data = {
					ciType: that.applyType,
					ciTitle: that.ciTitle,
					ciTaxpayerIdentificationNumber: that.ciNumber,
					ciPhoneNumber: that.ciPhoneNumber,
					ciRegisteredAddress: that.ciRegisteredAddress,
					ciBank: that.ciBank,
					ciBankAccount: that.ciBankAccount,
					ciEmail: that.ciEmail
				};
				
				if(that.editFlag == 1) {
					
					data["cfId"] = that.cfId;
					that.$api.globalUtil.requestAjax({
						url: '/customerInvoiceApi/modifyInvoice',
						method: 'POST',
						data: data,
						success: function(res) {
							that.$api.msg("修改成功");
							setTimeout(function() {
								uni.navigateBack({
								});
							}, 2000);
						}
					});
				}else {
					that.$api.globalUtil.requestAjax({
						url: '/customerInvoiceApi/addInvoice',
						method: 'POST',
						data: data,
						success: function(res) {
							that.$api.msg("添加成功");
							setTimeout(function() {
								uni.navigateBack({
								});
							}, 2000);
						}
					});
				}
			},
			
			
			//删除发票
			deleteInvoiceHandler() {
				
				var that = this;
				uni.showModal({
					content: '确认要删除发票？',
					confirmText: '确认',
					cancelText: '取消',
					success(res) {
						if (res.confirm) {
							
							that.$api.globalUtil.requestAjax({
								url: '/customerInvoiceApi/delInvoice',
								method: 'POST',
								data: {
									cfId: that.cfId
								},
								success: function(res) {
									that.$api.msg("删除成功");
									setTimeout(function() {
										uni.navigateBack({
										});
									}, 2000);
								}
							});
						}
					}
				});
			}
		}
	}
</script>

<style lang="less">
	page{
		background: #F5F5F5;
	}
	
	/* header部分 */
	.header-Container {
		width: 100%;
		height: 176rpx;
		overflow: hidden;
		box-shadow: 0px 1rpx 1rpx 0px rgba(0, 0, 0, 0.08);
		background: rgba(255, 255, 255, 1);
	
		.leftBtns {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;
	
			.back {
				margin-left: 17rpx;
				width: 44rpx;
				height: 44rpx;
			}
		}
	
		.title {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;
			line-height: 86rpx;
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
		}
	}
	
	
	//申请类型
	.applyType-Container {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		position: relative;
		margin: 0 auto;
		width:490rpx;
		height:70rpx;
		line-height: 70rpx;
		background:rgba(255,255,255,1);
		border-radius:20rpx;
		
		.applyType {
			display: flex;
			align-items: center;
			z-index: 9;
			height: 100%;
			text-align: center;
			font-size:30rpx;
			font-family:PingFang SC;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			
			&:last-of-type {
				margin-left: 90rpx;
			}
			
			//选中/取消
			.checkbox {
				margin-right: 15rpx;
				height: 36rpx;
				width: 36rpx;
			}
			
			.typeName {
				font-size: 26rpx;
				color: #333333;
			}
		}
	}
	
	
	//申请信息
	.inputHolder {
		font-size: 26rpx;
		color: #BFBFBF;
	}
	.applyInfo-Container {
		margin: 0 auto;
		margin-top: 30rpx;
		width: 100%;
		border-radius: 16rpx;
		background-color: #FFFFFF;
		
		//一行样式
		.oneRow {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0 auto;
			width: 690rpx;
			height: 96rpx;
			
			.columnLabel {
				width: 200rpx;
				font-size:26rpx;
				font-family:PingFang SC;
				color: #666666;
			}
			.columnValue {
				width: 490rpx;
				text-align: left;
				font-size:26rpx;
				font-family:PingFang SC;
				color: #333333;
				
				input {
					font-size:26rpx;
				}
			}
		}
		
		//分割线
		.splitLine {
			position: relative;
			margin: 0 auto;
			width: 690rpx;
		}
		.splitLine.borderOneRpx:after {
			border-top: 0;
			border-left: 0;
			border-right: 0;
			border-color: #EDEDED;
		}
	}
	
	
	//保存
	.submit-btn{
		justify-content: center;
		margin: 0 auto;
		margin-top: 105rpx;
		margin-bottom: 60rpx;
		width:600rpx;
		height:90rpx;
		line-height: 90rpx;
		
		background: #FE5E49;
		border-radius:45rpx;
		text-align: center;
		font-size:34rpx;
		font-family:PingFang;
		color:rgba(255,255,255,1);
	}
	
	//删除
	.delete-btn {
		margin: 0 auto;
		margin-bottom: 100rpx;
		width:600rpx;
		height:90rpx;
		line-height: 90rpx;
		text-align: center;
		font-size:34rpx;
		font-family:PingFang SC;
		// font-weight:500;
		color:#FE5E49;
		background:rgba(255,255,255,1);
		border:1px solid #FE5E49;
		border-radius:45rpx;
	}
</style>



